<template>
    <div class="main-container">
        <global />
        <div class="main-content">
            <div class="content-container">
                <div class="service-manage">
                    <div class="header">
                        <!-- 新增搜索和筛选组件 -->
                        <el-input v-model="SSid" placeholder="请输入需要搜索的学生学号"
                            style="width: 200px; margin-right: 10px;"></el-input>
                        <el-button type="primary" @click="page">搜索</el-button>
                    </div>
                    <el-table :data="evaluationRecords" border style="width: 100%">
                        <el-table-column label="学生学号" prop="taSid"></el-table-column>
                        <el-table-column label="学生姓名" prop="sName"></el-table-column>
                        <el-table-column label="预警等级">
                            <template #default="scope">
                                <span  :style="{ color: scope.row.taLevel === 4 ? 'red' : 'orange' }">
                                {{ scope.row.taLevel === 3 ? '中度预警' : '重度预警' }}
                               </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="预警状态">
                            <template #default="scope">
                               <span  :style="{ color: scope.row.taStatus === 1 ? 'red' : 'green' }">
                                {{  scope.row.taStatus == 1 ? '未处理' : '已通知' }}
                               </span> 
                            </template>
                        </el-table-column>
                        <el-table-column label="预警描述">
                            <template #default="scope">
                                <el-tooltip :content="scope.row.taContent" placement="top">
                                    <div class="ellipsis-text" @click="showDetail(scope.row.taContent)">
                                        {{ scope.row.taContent }}
                                    </div>
                                </el-tooltip>
                            </template>
                        </el-table-column>
                        <el-table-column label="预警时间" prop="taCreatetime"></el-table-column>
                        <el-table-column label="预警次数" prop="taCount"></el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button size="small" @click="seeWarnData(scope.row)" style="color: red;">提醒学生</el-button>
                            </template>
                        </el-table-column>
                        </el-table>
                    <!-- 分页组件 -->
                    <div class="pagination-container">
                        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                            :page-sizes="[10, 20, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
                            :total="total" class="pagination" @current-change="page" />
                    </div>

                    <el-dialog v-model="warnDialogVisible2" title="提醒学生" width="60%">
                        <el-row :gutter="20">
                            <!-- 左侧原有信息列 -->
                            <el-col :span="12">
                                <div>
                                    <h4>{{ viewWarnData.scName }}</h4>
                                    <p>考试成绩：{{ viewWarnData.scgGrade }}</p>
                                    <p>平时成绩：{{ viewWarnData.scgPgrade }}</p>
                                </div>
                            </el-col>
                            <!-- 右侧新增输入框列 -->
                            <el-col :span="12">
                                <!-- 第一个输入框替换为下拉选择框 -->
                                <el-select v-model="tgardto.tgarLevel" placeholder="请选择提示等级" style="margin-bottom: 20px;">
                                    <el-option label="中度预警" value="1"></el-option>
                                    <el-option label="重度预警" value="2"></el-option>
                                </el-select>

                                <!-- 第二个输入框改为可拉伸的文本域 -->
                                <el-input v-model="tgardto.tgarContent" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
                                    placeholder="请输入建议内容"></el-input>
                            </el-col>
                        </el-row>
                        <template #footer>
                            <el-button @click="warnDialogVisible2 = false">关闭</el-button>
                            <el-button @click="sendWarn">发送</el-button>
                        </template>
                    </el-dialog>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { reactive, toRefs, onMounted, ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from '@/router/axios'
import { getSessionStorage } from '@/router/common'

export default {
    setup() {
        const state = reactive({
            tgardto:{
                tgarCid: '',
                tgarContent: '',
                tgarLevel: 0,
                tgarSid: '',
                tgarTaid: 0,
                tgarTid : getSessionStorage("teacher").tTid,
            },
            warnDialogVisible2: false,
            viewWarnData : {},
            tap : { 
                tapLevel : '',
                tapContent : ''
            },
            // 模拟数据 - 评估记录
            evaluationRecords: [],
            currentPage: 1,
            pageSize: 5,
            total: 0,
            SSid: ''
        })

        function seeWarnData(row){
            state.tgardto.tgarSid = row.taSid;
            state.tgardto.tgarTaid = row.taId;
            state.tgardto.tgarCid = row.taCid;
            state.warnDialogVisible2 = true;
            axios.get('api/teacher/tscgrades/getstugradebysid',{
                params: {
                    cid: row.taCid,
                    sid: row.taSid
                }
            }).then(res => {
                const result = res.data;
                if(result.code == 1){
                    state.viewWarnData = result.data;
                }else{
                    ElMessage.error(result.msg);
                }
            })
        }

        function sendWarn(){
            if(state.tgardto.tgarContent == '' || state.tgardto.tgarLevel == 0){
                ElMessage.warning('请填写完整');
                return;
            }
            axios.post('/api/teacher/TGradewarnreport/add',state.tgardto).then(res=>{
                const result = res.data;
                if(result.code == 1){
                    ElMessage.success("发送成功");
                    state.warnDialogVisible2 = false;
                    page();
                }else{
                    ElMessage.error(result.msg)
                }
            })
        }
        
        // 点击查看详情方法
        function showDetail(content) {
            ElMessageBox({
                title: '预警详情',
                message: `<div style="text-align: left; white-space: pre-wrap;">${content}</div>`,
                dangerouslyUseHTMLString: true,
                showCancelButton: false,
                confirmButtonText: '关闭',
                closeOnClickModal: true
            })
        }
        
        page();
        function page() {
            axios.get('api/teacher/talert/getStuGradeList', {
                params: {
                    page: state.currentPage,
                    pageSize: state.pageSize,
                    SSid: state.SSid
                }
            }).then(res => {
                const result = res.data;
                if(result.code == 1){
                    state.evaluationRecords = result.data.records;
                    state.total = result.data.total;
                    console.log(state.evaluationRecords);
                }else{
                    ElMessage.error(result.msg);
                }
            })
        }

        return {
            ...toRefs(state),
            page,
            showDetail,
            sendWarn,
            seeWarnData
        }
    }
}
</script>

<style scoped>
.main-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
}

.main-content {
    margin-left: 220px;
    margin-top: 60px;
    width: calc(100% - 220px);
    height: calc(100vh - 60px);
    overflow: auto;
}

.content-container {
    padding: 20px;
    min-height: calc(100% - 40px);
}

.header {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.expand-detail {
    padding: 20px;
}

.evaluation-input {
    margin-top: 20px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 4px;
}

.evaluation-input h3 {
    margin-bottom: 20px;
    color: #409EFF;
}

.chart-container {
    padding: 20px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.chart-filters {
    margin-bottom: 20px;
}

.chart {
    height: 400px;
    width: 100%;
}

/* 新增：省略文本样式 */
.ellipsis-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px; /* 根据实际需求调整宽度 */
    display: inline-block;
    cursor: pointer;
}

/* 响应式布局中调整省略宽度 */
@media (max-width: 768px) {
    .main-content {
        margin-left: 0;
        width: 100%;
    }
    
    .ellipsis-text {
        max-width: 120px;
    }
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    padding: 10px 0;
}

.operation-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.operation-buttons .el-button {
    width: 100%;
    margin-left: 0;
}

:deep(.operation-popover) {
    padding: 12px;
}
</style>